<template>
  <!-- 主页 -->
  <div>
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in list" :key="item.title"
        ><div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ item.title }}</span>
              <el-tag style="float: right">{{ item.danwei }}</el-tag>
              <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <div class="div-first">
              <span>${{ item.number }}</span>
              <svg class="vben-svg-icon anticon anticon" aria-hidden="true" data-v-442f5584="" style="width: 40px; height: 40px">
                <use xlink:href="#icon-visit-count" data-v-442f5584="">
                   
                  <svg viewBox="0 0 419.23 419.23" id="icon-visit-count">
                    <g id="icon-visit-count_Layer_2" data-name="Layer 2">
                      <g id="icon-visit-count_Layer_1-2" data-name="Layer 1">
                        <circle cx="210.66" cy="209.62" r="203.61" style="fill: #fbc907"></circle>
                        <path
                          d="M27.21 209.62A203.61 203.61 0 0 1 220.72 6.26q-5-.25-10.08-.25C98.19 4.86 6.11 95.09 5 207.54s89.05 204.53 201.5 205.67h4.13q5.06 0 10.08-.25a203.61 203.61 0 0 1-193.5-203.34Z"
                          style="fill: #f3a70f"
                        ></path>
                        <path
                          class="cls-3"
                          d="M209.61 419.23C94 419.23 0 325.19 0 209.61S94 0 209.61 0s209.62 94 209.62 209.61-94.04 209.62-209.62 209.62Zm0-407.23C100.65 12 12 100.65 12 209.61s88.65 197.61 197.61 197.61 197.61-88.65 197.61-197.61S318.58 12 209.61 12Z"
                        ></path>
                        <path
                          class="cls-4"
                          d="M111.69 60.1a195 195 0 0 1 41.08-21.2c3.59-1.34 2-7.14-1.6-5.79a201.47 201.47 0 0 0-42.51 21.8c-3.18 2.15-.18 7.35 3 5.18ZM35.09 160.61c3.09-10.2 8-20 13.05-29.32a212.37 212.37 0 0 1 47.73-59.11c2.93-2.52-1.33-6.75-4.24-4.24A217.08 217.08 0 0 0 43 128.26C37.63 138 32.54 148.34 29.31 159c-1.12 3.7 4.67 5.29 5.79 1.6Z"
                        ></path>
                        <circle class="cls-5" cx="211.45" cy="212.12" r="156.89"></circle>
                        <path
                          d="M67.05 232.07a156.89 156.89 0 0 1 283.33-92.82A156.91 156.91 0 1 0 85 304.92a156.19 156.19 0 0 1-17.95-72.85Z"
                          style="fill: #dadada"
                        ></path>
                        <path
                          class="cls-5"
                          d="M211.32 152.25a9.16 9.16 0 0 1 9.16 9.16v49.09a9.16 9.16 0 0 1-9.16 9.16 9.16 9.16 0 0 1-9.16-9.16v-49.09a9.16 9.16 0 0 1 9.16-9.16Z"
                        ></path>
                        <circle class="cls-5" cx="211.14" cy="221.32" r="15.94"></circle>
                        <path
                          class="cls-3"
                          d="M210.48 92.62c6.29 0 6.29-9.77 0-9.77s-6.29 9.77 0 9.77ZM210.48 343.89c6.29 0 6.29-9.77 0-9.77s-6.29 9.77 0 9.77ZM339.84 218.25c6.29 0 6.29-9.77 0-9.77s-6.29 9.77 0 9.77ZM81.13 218.25c6.29 0 6.29-9.77 0-9.77s-6.29 9.77 0 9.77ZM205.56 153.32a9.16 9.16 0 0 1 9.16 9.16v49.09a9.16 9.16 0 0 1-9.16 9.16 9.16 9.16 0 0 1-9.16-9.16v-49.08a9.16 9.16 0 0 1 9.16-9.17Z"
                        ></path>
                        <circle class="cls-3" cx="205.38" cy="221.15" r="15.94"></circle>
                        <path
                          class="cls-3"
                          d="m135.78 272.58 135.16-89.89L290.11 170c5.22-3.46.33-11.94-4.92-8.44L150 251.4l-19.17 12.74c-5.19 3.46-.31 11.94 4.95 8.44Z"
                        ></path>
                        <g style="opacity: 0.1"><ellipse cx="210.2" cy="211.21" rx="156.89" ry="154.23" style="fill: #55e0ff"></ellipse></g>
                        <path
                          class="cls-9"
                          d="M243.13 60.17 84.37 301.88a162.18 162.18 0 0 1-18.58-47.29L193.5 60.21a153.88 153.88 0 0 1 49.67 0ZM289.69 72.6 115.93 325.78a155.09 155.09 0 0 1-14.77-15L270 64.76a155.38 155.38 0 0 1 19.69 7.84ZM362.16 171.75 232.51 360.68a160.93 160.93 0 0 1-42.54.43l156.66-228.27a151.63 151.63 0 0 1 15.53 38.91Z"
                        ></path>
                        <path
                          class="cls-3"
                          d="M210.12 369.75c-89.82 0-162.89-71.88-162.89-160.23S120.31 49.29 210.12 49.29 373 121.17 373 209.52s-73.06 160.23-162.88 160.23Zm0-308.46c-83.2 0-150.89 66.5-150.89 148.23s67.69 148.23 150.89 148.23S361 291.25 361 209.52 293.32 61.29 210.12 61.29Z"
                        ></path>
                      </g>
                    </g>
                  </svg>
                </use>
              </svg>
            </div>
            <div class="div-two">
              <span>总{{ item.title }}</span>
              <span>${{ item.all_number }}</span>
            </div>
          </el-card>
        </div></el-col
      >
    </el-row>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="流量趋势" name="first"><Flow v-if="activeName === 'first'" /></el-tab-pane>
      <el-tab-pane label="访问量" name="PV"><PV v-if="activeName === 'PV'" /></el-tab-pane>
    </el-tabs>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card box-three">
          <div slot="header" class="clearfix">
            <span>转换率</span>
          </div>
          <Percent />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card box-three">
          <div slot="header" class="clearfix">
            <span>访问来源</span>
          </div>
          <Pie />
        </el-card> </el-col
      ><el-col :span="8">
        <el-card class="box-card box-three">
          <div slot="header" class="clearfix">
            <span>成交占比</span>
          </div>
          <Ratio />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import Flow from './Charts/Flow.vue';
import Loading from './Charts/Loading.vue';
// 组件懒加载
const Flow = () => ({
  component: import('./Charts/Flow.vue'),
  loading: Loading,
});
const PV = () => import('./Charts/PV.vue');
const Percent = () => import('./Charts/Percent.vue');
const Pie = () => import('./Charts/Pie.vue');
const Ratio = () => import('./Charts/Ratio.vue');

export default {
  data() {
    return {
      list: [],
      activeName: 'first',
    };
  },
  // 挂载时
  mounted() {
    this.$http.post('/api/number').then((ret) => {
      this.list = ret.data;
    });
  },
  methods: {
    handleClick(tab, event) {
      this.activeName = tab.name;
    },
  },
  components: {
    Flow,
    PV,
    Percent,
    Pie,
    Ratio,
  },
};
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.anticon {
  display: inline-block;
  color: inherit;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  vertical-align: -0.125em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.vben-svg-icon[data-v-442f5584] {
  display: inline-block;
  overflow: hidden;
  vertical-align: -0.15em;
  fill: currentColor;
}
.div-first {
  display: flex;
  justify-content: space-between;
  font-size: 28px;
}
.div-two {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  font-size: 14px;
}
</style>
